<template>
  <div>
    <el-card>
      <el-row>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/device' }"
            >设备管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>设备排查</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <!-- 1.排查按钮 -->
      <el-row>
        <el-col :span="2" :offset="1" style="margin-top: 20px" dis>
          <el-button
            type="primary"
            @click="checkStart"
            :disabled="buttonDisable"
            round
            plain
            >开始排查</el-button
          >
        </el-col>
      </el-row>
      <!-- 2.排查日历 -->
      <el-collapse
        v-model="activeNames"
        style="margin-top: 30px"
        @change="handleChange"
      >
        <el-collapse-item title="排查日历" name="1">
          <!-- 在数据加载完成后显示的组件 -->
          <el-calendar>
            <template slot="dateCell" slot-scope="{ date, data }">
              <p :class="isSelected(date) ? 'is-selected' : ''">
                {{ data.day.split("-").slice(1).join("-")
                }}{{ isSelected(data) ? "✔️" : "" }}
              </p>
            </template>
          </el-calendar>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <!-- 3.待排查设备表 -->
    <div style="margin-top: 40px" v-show="ifshow()">
      <el-card>
        <p><b>待排查设备清单</b></p>
        <el-breadcrumb separator-class="el-icon-arrow-right"> </el-breadcrumb>
        <el-table :data="deviceList" style="width: 100%">
          <el-table-column label="序号" width="70">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.did }}</span>
            </template>
          </el-table-column>

          <el-table-column label="小区" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.cell.cname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备名称" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.dname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备编号" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.dnumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.dtype }}</span>
            </template>
          </el-table-column>
          <el-table-column label="责任人" width="80" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.principal.uname
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" width="120" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.principal.phone
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="500" align="center">
            <template slot-scope="scope">
              <el-button
                round
                plain
                size="mini"
                type="success"
                @click="handleCheck(scope.$index, scope.row)"
                v-if="scope.row.status == 4"
                >排查</el-button
              >
              <el-button
                round
                plain
                size="mini"
                type="primary"
                disabled
                v-if="scope.row.status != 4"
                >已排查</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 4.设备排查对话框-->
        <el-dialog
          title="设备排查"
          :visible.sync="dialogFormVisible"
          @close="closeDialog"
          center
        >
          <el-row>
            <el-col :span="16" :offset="4">
              <el-form :model="deviceCheck" label-width="100px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="小区">
                      <el-select
                        v-model="deviceCheck.cell.cid"
                        placeholder="请选择小区"
                        disabled
                      >
                        <el-option
                          v-for="item of cellList"
                          :key="item.cid"
                          :label="item.cname"
                          :value="item.cid"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备名称" prop="dname">
                      <el-input v-model="deviceCheck.dname" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="设备编码" prop="dnumber">
                      <el-input
                        disabled
                        v-model="deviceCheck.dnumber"
                      ></el-input> </el-form-item
                  ></el-col>
                  <el-col :span="12">
                    <el-form-item label="设备类型" prop="dtype">
                      <el-input
                        disabled
                        v-model="deviceCheck.dtype"
                      ></el-input> </el-form-item
                  ></el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="责任人">
                      <el-select
                        v-model="deviceCheck.principal.uid"
                        placeholder="请选择责任人"
                        disabled
                      >
                        <el-option
                          v-for="item of userList"
                          :key="item.uid"
                          :label="item.uname"
                          :value="item.uid"
                        ></el-option>
                      </el-select> </el-form-item
                  ></el-col>
                  <el-col :span="12">
                    <el-form-item label="生产厂家" prop="manufacturer">
                      <el-input
                        disabled
                        v-model="deviceCheck.manufacturer"
                      ></el-input> </el-form-item
                  ></el-col>
                </el-row>

                <el-divider></el-divider>
                <el-form-item label="损坏级别">
                  <el-select
                    v-model="deviceCheck.damagedegree"
                    placeholder="请选择损坏级别"
                  >
                    <el-option label="正常" value="0"></el-option>
                    <el-option label="一级损毁" value="1"></el-option>
                    <el-option label="二级损毁" value="2"></el-option>
                    <el-option label="三级损毁" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="mark">
                  <el-input
                    type="textarea"
                    v-model="deviceCheck.mark"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-row style="margin-top: 50px">
                    <el-col :span="10" :offset="7">
                      <el-button type="primary" @click="checkDevice()"
                        >确定</el-button
                      >

                      <el-button
                        type="info"
                        @click="closeDialog"
                        style="margin-left: 40px"
                        >取消</el-button
                      >
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: [],

      selectedDates: [], // 默认选中的日期数组
      buttonDisable: false,
      deviceList: [],

      showCheckOrder: false,

      dialogFormVisible: false,
      deviceCheck: {
        cell: { cname: "" },
        principal: { uname: "" },
      },

      cellList: [],
      userList: [],
      needCheck: 0,
    };
  },
  methods: {
    getCellList() {
      this.$axios.get("/cell/getAll").then((respData) => {
        this.cellList = respData.data.data;
      });
    },
    getUserList() {
      this.$axios.get("/user/getAll").then((respData) => {
        this.userList = respData.data.data;
      });
    },
    //获得之前设备排查结束时间
    getCheckDate() {
      this.$axios.get("/deviceCheck/getCheckDates").then((respData) => {
        this.selectedDates = respData.data.data;
      });
    },
    //判断日期是否被选中
    isSelected(data) {
      for (var date of this.selectedDates) {
        if (data.day == date) {
          return true;
        }
      }
      return false;
    },

    //开始排查按钮点击事件
    checkStart() {
      this.buttonDisable = false;
      //1.设备状态改变
      this.$axios.put("/device/waitingCheck").then((respData) => {
        this.getDeviceList();
        //2.排查信息表中新增数据
        this.$axios.post("/deviceCheck/addDeviceCheck").then((respdata) => {
          console.log(respdata);
        });
      });
    },
    handleChange(val) {
      console.log(val);
    },
    handleCheck(index, row) {
      this.deviceCheck = row;

      this.getCellList();
      this.getUserList();
      this.dialogFormVisible = true;
    },

    //查询未损毁的设备列表
    getDeviceList() {
      this.$axios.get("/device/getAll").then((respData) => {
        console.log(respData);
        this.deviceList = respData.data.data;
        // this.ifshow();
        if (this.ifshow()) {
          this.activeNames = [];
        } else {
          this.activeNames = ["1"];
        }
      });
    },
    checkDevice() {
      this.$axios
        .post("/deviceCheckItem/checkDevice", this.deviceCheck)
        .then((respData) => {
          if (respData.data.data) {
            this.$message.success("已成功排查！");
            this.deviceCheck.status = this.deviceCheck.damagedegree;
            this.closeDialog();
          }
        });
    },
    closeDialog() {
      this.deviceCheck = {
        cell: { cname: "" },
        principal: { uname: "" },
      };
      this.dialogFormVisible = false;
      // location.reload();
    },
    //判断排查表是否显示
    ifshow() {
      for (const device of this.deviceList) {
        if (device.status == 4) {
          return true;
        }
      }
      return false;
    },
    ifEnableCheck() {
      this.$axios.get("/deviceCheck/ifEnableCheck").then((respdata) => {
        console.log(respdata.data.data);

        this.buttonDisable = respdata.data.data;
      });
    },
  },
  mounted() {
    this.getCheckDate();
    this.getDeviceList();
    this.ifEnableCheck();
  },
};
</script>

<style>
.is-selected {
  color: #1989fa;
}
</style>